<template>
	<view>
		<view class="address">
		    <view class="address-list">
		        <block v-for="(item,index) in address_list" :key="index">  
		            <view class="address-item f-nw f-j-b">
		                <view class="left">
		                    <view class="name-phone f-a-c"> <text class="name">{{item.username}}</text> <text class="phone">{{item.phone}}</text>  <text class="mo-ren" v-if="item.is_state==1">默认</text> </view>
		                    <view class="address-details">{{item.province}}{{item.city}}{{item.area}}{{item.address}}</view>
		                </view>
		                <view class="right edit f-s-0" @click="to_addAddress(item)">编辑</view>
		            </view>
		        </block>
		    </view>
		    <view class="loadmore-bottom" v-if="address_list.length==0">暂无数据</view>
		</view>
		
		<view class="operation f-nw">
		    <navigator class="custom-add-address f-c" url="/pages/addAddress/addAddress">新增收货地址</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address_list: []
			}
		},
		methods: {
			to_addAddress(item) {
                uni.navigateTo({
                    url: "../addAddress/addAddress?item="+JSON.stringify(item)
                })
            }
		},
        onShow() {
            this.$api.getUserAddressList().then(res=>{
                this.address_list = res.data;
            })
        }
	}
</script>

<style>
/* pages/address/address.wxss */
page{
  background-color: #F7F7F7
}
.address{
  padding-bottom: 88rpx;
  margin-bottom: 20rpx
}
.address-list{
  padding: 0 20rpx;
  background-color: #fff;
  box-sizing: border-box
}
.address-item{
  padding: 20rpx 10rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 28rpx;
  color: #333;
  box-sizing: border-box;
  min-height: 123rpx
}

.address-details{
  font-size: 26rpx
}
.name-phone{
  font-weight: 500;
  margin-bottom: 10rpx;
}
.name-phone .mo-ren{
  color: #49e461;
  font-size: 20rpx;
  display: inline-block;
  height: 28rpx;
  line-height: 28rpx;
  padding: 0 8rpx;
  box-sizing: border-box;
  border: 1rpx solid #49e461;
  border-radius: 6rpx;
  margin-left: 18rpx;
}
.name{
  margin-right: 20rpx;
}
.edit{
  color:#49e461;
  font-size: 36rpx;
}

.operation{
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  box-shadow:0rpx 5rpx 20rpx #ddd;
  height: 88rpx;
  font-size: 32rpx
}
.icon-weixin{
  color: rgb(0, 182, 13);
  font-size: 38rpx;
  margin-right: 10rpx
}
.operation>navigator{
  flex-basis: 100%
}
.custom-add-address{
  background-color: #49e461;
  color: #fff;
}
</style>
